<template>
	<div>
		<!--面包屑导航区域-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!--卡片视图区域-->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary" @click="showAddCatDialog">添加分类</el-button>
				</el-col>
			</el-row>
			<!--表格-->
			<tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
				<!--是否有效-->
				<template slot="isok" slot-scope="scope">
					<i v-if="scope.row.cat_deleted===false" class="el-icon-success"></i>
					<i v-else class="el-icon-error"></i>
				</template>
				<!--排序-->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
					<el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
					<el-tag size="mini" type="warning" v-else>三级</el-tag>
				</template>
				<!--操作-->
				<template slot="opt" slot-scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCat(scope.row)">删除</el-button>
				</template>
			</tree-table>
			<!--分页-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3,5, 10, 15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!--添加分类的对话框-->
		<el-dialog title="添加分类" :visible.sync="addCatDialogVisible" width="50%" @close="addCatDialogClosed">
			<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
				<el-form-item label="分类名称" prop="cat_name">
					<el-input v-model="addCateForm.cat_name"></el-input>
				</el-form-item>
				<el-form-item label="父级分类">
					<!--options用来指定数据源-->
					<el-cascader
				    v-model="selectedKeys"
				    :options="parentCateList"
				    :props="cascaderProps"
				    @change="parentCateChanged" clearable>
				    </el-cascader>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="addCatDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCate">确 定</el-button>
		  </span>
		</el-dialog>
		<!--编辑分类的对话框-->
		<el-dialog title="编辑分类" :visible.sync="editCatDialogVisible" width="50%" @close="editCatDialogClosed">
			<el-form :model="editCateForm" :rules="addCateFormRules" ref="editCateFormRef" label-width="100px">
				<el-form-item label="分类名称" prop="cat_name">
					<el-input v-model="editCateForm.cat_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="editCatDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editCate">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//查询条件
				queryInfo: {
					type: 3,
					pagenum: 1,
					pagesize: 5
				},
				//商品分类的数据列表，默认为空
				cateList: [],
				//总数据条数
				total: 0,
				//				为table定义各列表的属性
				columns: [{
					label: '分类名称',
					prop: 'cat_name'
				}, {
					label: '是否有效',
					//表示将当前列定义为模板列
					type: 'template',
					//模板名称
					template: 'isok',
				}, {
					label: '排序',
					//表示将当前列定义为模板列
					type: 'template',
					//模板名称
					template: 'order',
				}, {
					label: '操作',
					//表示将当前列定义为模板列
					type: 'template',
					//模板名称
					template: 'opt',
				}],
				addCatDialogVisible: false,
				//添加分类的表单数据对象
				addCateForm: {
					cat_name: "",
					cat_pid:0,
					cat_level:0
				},
				//添加分类的表单验证规则对象
				addCateFormRules: {
					cat_name: [{
							required: true,
							message: '请输入分类名称',
							trigger: 'blur'
					}]
				},
				//父级分类的列表
				parentCateList:[],
				//指定级联选择器的配置对象
				cascaderProps:{
					expandTrigger: 'hover',
					value:"cat_id",
					label:"cat_name",
					childern:"children",
					//单选选择任一选项
					checkStrictly: true
				},
				//选中的父级分类的id数组
				selectedKeys:[],
				editCatDialogVisible:false,
				editCateForm:{cat_name: ""},
				//点击编辑之后，将当前编辑的类型id保存在数据里
				editId:""
			}
		},
		created() {
			this.getCateList();

		},
		methods: {
			async getCateList() {
				const {
					data: res
				} = await this.$http.get("categories", {
					params: this.queryInfo
				});
				if(res.meta.status !== 200) {
					return this.$$message.error("获取商品列表失败！")
				}
				this.cateList = res.data.result;
				this.total = res.data.total;
			},
			//监听pagesize改变
			handleSizeChange(newSize) {
				this.queryInfo.pagesize = newSize;
				this.getCateList();
			},
			//监听pagenum改变
			handleCurrentChange(newPage) {
				this.queryInfo.pagenum = newPage;
				this.getCateList();
			},
			//点击添加分类
			showAddCatDialog() {
				this.getParentCatList();
				this.addCatDialogVisible = true;
			},
			//获取父级分类的数据列表
			async getParentCatList(){
				var { data:res }=await this.$http.get("categories",{
					params:{type:2}
				})
				if(res.meta.status !== 200) {
					return this.$message.error("获取父级分类失败！")
				}
				this.parentCateList=res.data;
			},
			parentCateChanged(){
				//如果selectedKeys的length>0，证明选中了父级分类，反之就没选中父级分类
				if(this.selectedKeys.length>0){
					this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1];
					this.addCateForm.cat_level=this.selectedKeys.length;
					return;
				}else{
					this.addCateForm.cat_pid=0;
					this.addCateForm.cat_level=0;			
				}
			},
			//点击提交新增分类
			addCate(){
				this.$refs.addCateFormRef.validate(async valid=>{
					if(!valid) return;
					const {data:res}=await this.$http.post("categories",this.addCateForm);
					if(res.meta.status !== 201) {
						return this.$message.error("添加分类失败！")
					}
					this.$message.success("添加分类成功！");
					this.getCateList();
					this.addCatDialogVisible = false;
				});
				
			},
			//监听对话框关闭事件，重置表单数据
			addCatDialogClosed(){
				this.$refs.addCateFormRef.resetFields();
				this.selectedKeys=[];
				this.addCateForm.cat_pid=0;
				this.addCateForm.cat_level=0;
				
			},
			//点击编辑
			async showEditDialog(row){
				this.editId=row.cat_id;
				const {data:res}=await this.$http.get("categories/"+row.cat_id);
				if(res.meta.status !== 200) {
					return this.$message.error("查询分类名称失败！")
				}
				this.editCateForm.cat_name=res.data.cat_name;
				this.editCatDialogVisible = true;
			},
			//监听对话框关闭事件，重置表单数据
			editCatDialogClosed(){
				this.$refs.editCateFormRef.resetFields();
			},
			//提交编辑
			editCate(){
				this.$refs.editCateFormRef.validate(async valid=>{
					if(!valid) return;
					const {data:res}=await this.$http.put("categories/"+this.editId,this.editCateForm);
					if(res.meta.status !== 200) {
						return this.$message.error("编辑分类失败！")
					}
					this.$message.success("编辑分类成功！");
					this.getCateList();
					this.editCatDialogVisible = false;
				});
			},
			async deleteCat(row){
				//弹框询问用户是否删除数据
				const confirmResult = await this.$confirm('此操作将永久删除该商品类型, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if(confirmResult !== "confirm") {
					return this.$message.info("已取消删除！")
				}
				const {data: res} = await this.$http.delete("categories/" + row.cat_id);
				if(res.meta.status !== 200) {
					return this.$message.error("删除商品类型失败！");
				}
				this.$message.success("删除商品类型成功！");
				this.getCateList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-icon-success {
		color: lightgreen
	}
	
	.el-icon-error {
		color: lightred
	}
	
	.treeTable {
		margin-top: 15px;
	}
	.el-cascader{
		width: 100%;
	}
</style>